<template>
  <div class="acceon">
    <el-form ref="formInline" :model="formInline">
      <el-form-item label="商户">
        <el-input v-model="formInline.name"></el-input>
      </el-form-item>
      <el-form-item label="发布日期">
          <el-date-picker
            v-model="formInline.value1"
            type="month"
            placeholder="选择日期"
          >
          </el-date-picker>
      </el-form-item>
      <!-- <el-form-item label="订单号">
        <el-input
          v-model="formInline.user"
          placeholder="请输入搜索内容"
        ></el-input>
      </el-form-item> -->
      <el-form-item label="订单状态">
        <el-select v-model="formInline.region" placeholder="订单状态">
          <el-option label="全部订单" :value='null'></el-option>
          <el-option label="未支付" value="WaitPay"></el-option>
          <el-option label="待收货" value="InDelivery"></el-option>
          <el-option label="已完成" value="PaySuccess"></el-option>
          <el-option label="已取消" value="Cancel"></el-option>
        </el-select>
      </el-form-item>
    
        <el-button class="scceasn" @click="hutmct()">搜索</el-button>
        <el-button class="acicon" @click="chongtr()">重置</el-button>
    
      <el-button round size="small"  type="text" class="upload" @click="hExport"
        ><img src="@/assets/login/Group2545.png" />导出报表</el-button
      >
    </el-form>
    <el-tabs>
      <el-table :data="list" style="width: 100%">
        <el-table-column  label="订单号" prop="orderId" style="width: 20%">
        </el-table-column>
        <el-table-column label="商品名称" prop="commodityTitle" style="width: 10%">
        </el-table-column>
        <!-- <el-table-column label="货号" prop="" style="width: 10%">
        </el-table-column> -->
        <el-table-column label="商品数量" prop="commodityNumber" style="width: 5%">
        </el-table-column>
        <el-table-column label="订单金额" prop="amount" style="width: 5%">
        </el-table-column>
        <el-table-column label="支付方式" prop="payChannels" style="width: 5%">
          <template v-slot="{row}">

          {{formateng(row.payChannels)}}
          </template>
        </el-table-column>
        <el-table-column label="订单状态" prop="orderStatus" style="width: 10%">
          <template v-slot="{row}">
            <el-tag
              :type="row.orderStatus === 'PaySuccess' ? 'success' : 'info' && 
              row.orderStatus === 'Cancel' ? 'warning' : 'info' && 
              row.orderStatus === 'InDelivery' ? 'primary' : 'info' &&
              row.orderStatus === 'WaitPay' ? 'danger' : 'info'"
              disable-transitions
            >
             {{formatEmployment(row.orderStatus)}}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column  label="下单时间" prop="placeOrderTime" style="width: 10%">
         
        </el-table-column>
      </el-table>
      <el-pagination
        class="lyx"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="q.index"
        :page-size="2"
        layout="prev, pager, next, jumper"
      >
      </el-pagination>
    </el-tabs>
  </div>
</template>

<script>
import {userfinance} from '@/api/roles'
import employeesConst from "@/constant/employees";
const hiretaxtMaps = {};
employeesConst.hireTypegser.forEach((item) => {
  hiretaxtMaps[item.orderStatus] = item.value;
});
const hiretaxt = {}
employeesConst.hireTypeMap.forEach((item) => {
  hiretaxtMaps[item.payChannels] = item.value;
});
export default {
  data() {
    return {
      formInline:{
        value1: "",
        user:'',
        region:'',
        name:'',
        sg:''
      },
    list:[],
    q:{
      index:1,
      size:10,
      status:null,
      holdName:null,
      subOrderId:null,
      startTime:null,
      endTime:null
    },
    z:{
      index:1,
      size:1000,
      status:null
    }
    };
  },
  created(){
    this.loachengt()
  },
  methods: {
   async loachengt(){
       const res = await userfinance(this.q)
      //  console.log(res.data);
       this.list = res.data.data
       this.list.forEach(item=>{
        item.placeOrderTime=item.placeOrderTime.slice(0,3).join('-')
        // console.log(item.placeOrderTime);
       })
    
   
      //  console.log(this.list[0].placeOrderTime[0]);
    },
     formatEmployment(code) {
      return hiretaxtMaps[code];
    },
    formateng(code){
      return hiretaxt[code]
    },
    // 导出
   async hExport() {
        const mapinfo = {
          'orderId':'订单号',
          'commodityTitle':'商品名称',
          'commodityNumber':'商品数量',
          'amount':'订单金额',
          'payChannels':'支付方式',
          'orderStatus':'订单状态',
          'placeOrderTime':'下单时间',
          'confirmReceiptTime':'完成时间'
        }
        this.z.status = this.q.status
        const res = await userfinance(this.z)

        const employees = res.data.data
         res.data.data.forEach(item=>{
        item.placeOrderTime=item.placeOrderTime.slice(0,3).join('-')
        
       })
     
        //  console.log(employees);
         const first = employees[0]
         if (!first) return
        const header = Object.keys(first).map(enKey => mapinfo[enKey])
        const data = employees.map(item => {
        const code = item['orderStatus']
        item['orderStatus'] = hiretaxtMaps[code]
        // console.log('789',code);
        return Object.values(item)
      })
     const excel = await import('@/vendor/Export2Excel')
      excel.export_json_to_excel({
        header, // 表头, 传入一个数组
        data, // 数据, 传入一个二维数组 [ [] ] , 二维数组里面的数组就是一条数据
        filename: '订单报表', // 导出的文件名称
        autoWidth: true, // 自适应宽度
        bookType: 'xlsx' // 文件类型
      })
      // console.log('11111');
    },
    // 搜索
    hutmct(){
     if(this.formInline.region != ''){
      this.q.status = this.formInline.region
     }
     if(this.formInline.name != ''){
       this.q.holdName = this.formInline.name
     }  
     if(this.formInline.user != ''){
      this.q.subOrderId = this.formInline.user
     }
     if(this.formInline.value1){
  //  this.timer = []
        let date = new Date(this.formInline.value1);
       let Yr = date.getFullYear()
      // this.timer.push(Yr)
       let Mn = date.getMonth()+1
      
      if(Mn<10){
        Mn="0"+Mn
      }

      // this.timer.push(Mn)
      // this.timer.push(My)
      this.formInline.value1 = Yr+'-'+Mn+'-'+'01'+" "+'00'+':'+'00'+':'+'00'
      this.formInline.sg = Yr+'-'+Mn+'-'+'31'+" "+'23'+':'+'59'+':'+'59'
      // this.form.value1 = this.timer.join('-') +''+''+'00'+':'+'00'+':'+'00'
        this.q.startTime = this.formInline.value1
        this.q.endTime = this.formInline.sg

       }
      this.loachengt()

    },
    // 重置
    chongtr(){
      this.q.index = 1
        this.formInline.user = '',
        this.formInline.region = '',
        this.formInline.name = '',
        this.formInline.sg = ''
        this.formInline.value1 = ''
        this.q.status = null
        this.q.holdName = null
        this.q.subOrderId = null
        this.q.endTime = null
        this.q.startTime = null
        this.loachengt()
    },
   // 分页
    handleCurrentChange(index) {
      this.q.index = index;
      this.loachengt();
    },
    handleSizeChange(size) {
      this.q.size = size;
      this.loachengt();
    },
     }
  
};
</script>

<style scoped>
.acceon {
  background-color: #fff;
  padding-left: 20px;
  padding-top: 10px;
}
.el-select {
  transform: translateX(-5%);
  width: 70%;
}
.el-input {
  width: 70%;
  height: 30px;
}

.el-form-item {
  margin-left: 5px;
  display: inline-block;
  width: 230px;
}
.scceasn {
    background: linear-gradient(90deg, #ff7144 0%, #ff7144 100%);
    border: 1px solid #ff7144;
  color: #fff;
}
.scceasn:hover {
   background: linear-gradient(90deg, #ff7144 0%, #ff7144 100%);
}
.acicon:hover {
  background-color: rgb(255, 248, 243);
  color: #ff7144;
  border: 1px solid rgb(255, 190, 132);
}
.acicon:focus {
  background-color: rgb(255, 248, 243);
  color: #ff7144;
  border: 1px solid rgb(255, 190, 132);
}
.upload {
  position: absolute;
  right: 10%;
  top: 4%;
  color: #6c6e72;
  font-size: 16px;
}
.upload img {
  width: 15px;
  height: 15px;
  transform: translateY(10%);
  margin-right: 5px;
}
/* 
.el-form{
	height: 50px;
	line-height: 50px;
} */
</style>
